<template>
  <div>
    <input type="text" v-model="score">
    <img v-for="(item,index) in starClasses" :key="index" :src="require(`../../assets/img/${item}.png`)" alt="加载失败...">
  </div>
</template>
<script>

export default {
  data () {
    return {
      score: 3.5
    }
  },
  methods: {
    getResultArr (intScore, hasDecScore) {
      const resultArr = []
      let index = 0
      while (index < 5) {
        if (index < intScore) {
          resultArr.push('on')
        } else if (index === intScore && hasDecScore) {
          resultArr.push('half')
        } else {
          resultArr.push('off')
        }
        index++
      }
      return resultArr
    }
  },
  computed: {
    starClasses () {
      const nowScore = Math.floor(this.score * 2) / 2
      const intScore = Math.floor(nowScore)
      const hasDecScore = nowScore % 1 !== 0
      return this.getResultArr(intScore, hasDecScore)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
